/*
 * 鼠标移动到a标签上面显示tooltip并且切换图片
 * 调用样例
 * <PhotoChange href="www.baidu.com" backImg="/images/pc/content_icon_safe_hover.png" fontImg="/images/pc/content_icon_safe_normal.png">
 <HkfsProductDescription>
 <div>资金安全</div>
 <div>严格的资金管理流程完善安全技术</div>
 </HkfsProductDescription>
 </PhotoChange>
 *
 * HkfsProductDescription为content的内容，可自定义组件
 *
 * backImg:鼠标进入后的图片
 * fontImg：鼠标未进入的图片
 *
 * 根据父元素自动调整大小
 *
 * */
'use strict';
var React = require('react');
class PhotoChange extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activeImg: props.fontImg,//此处如果使用this.props访问数据源ie10ie9会undefined
            toolTip: false
        };
        this.renderImages = this.renderImages.bind(this);
        this.showBack = this.showBack.bind(this);
        this.showFront = this.showFront.bind(this);
        this.renderTooTip = this.renderTooTip.bind(this);
        this.isShowToolTip = this.isShowToolTip.bind(this);
        this.renderRipple=this.renderRipple.bind(this);
    }

    showFront() {
        this.setState({
            activeImg: this.props.fontImg,
            toolTip: false
        });
    }

    //显示背景
    showBack() {
        this.setState({
            activeImg: this.props.backImg,
            toolTip: true
        });
    }


    //是否显示tooltip
    isShowToolTip() {
        if (this.state.toolTip) {
            return 'PhotoChange_ToopTip'
        }
        else {
            return 'PhotoChange_ToopTip PhotoChange_HideToolTip'
        }
    }


    //渲染tooptip
    renderTooTip() {
        return <div ref="photoChangeToopTip" className={this.isShowToolTip()}>
            <div className="Bot"></div>
            <div className="Top"></div>
            <div ref="photoChangeContent" className="Content">
                {this.props.children}
            </div>
        </div>
    }

    componentDidMount() {
        //加载后修改tooltip的向左偏移量(此处如果不访问dom的话首次加载时动画不会显示)
        var photoChangeToopTip=this.refs.photoChangeToopTip;
        var container = this.refs.photoChangeContainer;
        //图片宽度
        var containerWidth = container.offsetWidth;
        var content=this.refs.photoChangeContent;
        var contentWidth=content.offsetWidth;
        var offsetDistance=((contentWidth-containerWidth)/2)*-1;
        photoChangeToopTip.style.left=offsetDistance.toString()+"px";
    }

    //显示前景
    renderImages() {
        return <a href={this.props.href} onMouseOver={this.showBack} onMouseOut={this.showFront}>
            <img src={this.state.activeImg}/>
        </a>
    }

    renderRipple(){
        var rippleStyle={
            animationDelay:this.props.rippleDelay+'s',
            webkitAnimationDelay:this.props.rippleDelay+'s',
            mozAnimationDelay:this.props.rippleDelay+'s',
            oAnimationDelay:this.props.rippleDelay+'s'
        };
        return <div className="PhotoChange_Ripple" style={rippleStyle}></div>
    }

    render() {
        return (
            <div ref="photoChangeContainer" className="PhotoChange_Container">
                {this.renderImages()}
                {this.renderTooTip()}
                {this.renderRipple()}
            </div>
        );
    }
}

module.exports = PhotoChange;